<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转按钮</title>
		<style type="text/css">
			div#d ul li{
				list-style: none;
				float: left;
				margin-left: 1em;
			}
			div#d ul li img:hover{
				transform: rotate(360deg) scale(1.2);	
			}
			div#d ul li img{
				cursor: pointer;
				animation: dongtai 5s 0s infinite normal running;
			}
			@keyframes dongtai{
				0%{height: 100px;width: 100px;transform: rotate(60deg);}
				25%{height: 200px;width: 200px;transform: rotate(90deg);}
				50%{height: 300px;width: 300px;transform: rotate(150deg);}
				75%{height: 400px;width: 400px;transform: rotate(240deg);}
				100%{height: 500px;width: 500px;transform: rotate(360deg);}
			}
		</style>
	</head>
	<body>
		<div id="d">
			<h1><strong>顺时针旋转360度放大1.2倍</strong></h1>
			<ul>
				<li><a href="#"><img src="images2/rss.png"></a></li>
				<li><a href="#"><img src="images2/delicious.png"></a></li>
				<li><a href="#"><img src="images2/facebook.png"></a></li>
				<li><a href="#"><img src="images2/twitter.png"></a></li>
				<li><a href="#"><img src="images2/yahoo.png"></a></li>
			</ul>
		</div>
	</body>
</html>
